<template>
	<div class="voice-message" :class="{ playing: isPlaying }">
		<div class="audio-time">{{ audioTime }}</div>
		<div class="audio-play-icon" :class="audioPlayIconClass" @click="togglePlay">
			<!-- <img :src="isPlaying ? '/static/icons/audio-play.png' : '/static/icons/audio-playing.png'"
				:style="{ width: '30px', height: '30px' }"> -->
			<img :src="isPlaying ? 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/playing.png' : 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/playing%20%281%29.png'"
				:style="{ width: '30px', height: '30px' }">
		</div>
	</div>
</template>

<script>
	export default {
		name: 'VoiceMessageComponent',
		props: {
			audioUrl: {
				type: String,
				required: true
			},
			audioTime: {
				type: String,
				required: true
			},
			index: {
				type: Number,
				required: true
			},
			isPlaying: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				innerAudioContext: null,
			};
		},
		computed: {
			audioPlayIconClass() {
				return {
					'animate': this.isPlaying
				};
			}
		},
		methods: {
			togglePlay() {
				if (!this.innerAudioContext) {
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.src = this.audioUrl;
					this.innerAudioContext.onEnded(() => {
						this.$emit('pauseAudio', this.index);
					});
					this.innerAudioContext.onError((err) => {
						console.error('音频播放错误', err);
					});
				}
				if (this.isPlaying) {
					this.innerAudioContext.pause();
					this.$emit('pauseAudio', this.index);
				} else {
					this.innerAudioContext.play();
					this.$emit('playAudio', this.index);
				}
			},


			destroyAudioContext() {
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
					this.innerAudioContext = null;
				}
			}
		},
		beforeDestroy() {
			this.destroyAudioContext();
		}
	};
</script>

<style scoped>
	.voice-message {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 40px;
		background-color: #89d961;
		border-radius: 10px;
	}

	.audio-play-icon {
		width: 30px;
		height: 30px;
		margin-left: 10px;
	}

	.voice-message.playing .audio-play-icon.animate {
		animation: audioPlayAnimation 0.5s infinite alternate;
		animation-fill-mode: both;
	}

	@keyframes audioPlayAnimation {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.2);
		}
	}

	.audio-time {
		font-size: 14px;
	}
</style>